/**
* 薪资期望
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>期望薪资管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.title" placeholder="输入期望薪资"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column sortable prop="id" label="序号" type="index" width="300">
      </el-table-column>
      <el-table-column sortable prop="title" label="期望薪资" width="300">
      </el-table-column>
      <el-table-column sortable prop="sort" label="排序" width="300">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="将入职时间" prop="title">
          <el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入期望薪资"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input size="small" v-model="editForm.sort" auto-complete="off" placeholder="请输入排序序号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { reList, reSave, reDelete } from '../../api/userMG'
  import Pagination from '../../components/Pagination'
  export default {
      data() {
        return {
          nshow: true, //switch开启
          fshow: false, //switch关闭
          loading: false, //是显示加载
          editFormVisible: false, //控制编辑页面显示与隐藏
          title: '添加',
          editForm: {
            id: '',
            title: '',
            sort: '',
            // token: localStorage.getItem('logintoken')
          },
          // rules表单验证
          rules: {
            deptName: [
              { required: true, message: '请输入期望薪资', trigger: 'blur' }
            ],
            deptNo: [{ required: true, message: '请输入排序', trigger: 'blur' }]
          },
          formInline: {
            page: 1,
            limit: 10,
            title: '',
            // token: localStorage.getItem('logintoken')
          },
          // 删除部门
          seletedata: {
            ids: '',
            token: localStorage.getItem('logintoken')
          },
          userparm: [], //搜索权限
          listData: [], //用户数据
          // 分页参数
          pageparm: {
            currentPage: 1,
            pageSize: 10,
            total: 10
          }
        }
      },
      // 注册组件
      components: {
        Pagination
      },
      /**
       * 数据发生改变
       */

      created() {
        this.getdata(this.formInline)
      },

      /**
       * 里面的方法只有被调用才会执行
       */
      methods: {
        getdata(title) {
          this.$axios.get("http://localhost:8080/manage/ExpectedSalary/list?title="+this.formInline.title).then(res=>{
            this.loading = false
            if (res.data.success == false) {
              this.$message({
                type: 'info',
                message: res.data.msg
              })
            } else {
              this.listData = res.data.data;
              // 分页赋值
              this.pageparm.currentPage = this.formInline.page
              this.pageparm.pageSize = this.formInline.limit
              this.pageparm.total = res.data.count
            }
          })
            .catch(err => {
              this.loading = false
              this.$message.error('菜单加载失败，请稍后再试！')
            })
        },


        // 分页插件事件
        callFather(parm) {
          this.formInline.page = parm.currentPage
          this.formInline.limit = parm.pageSize
          this.getdata(this.formInline)
        },
        // 搜索事件
        search() {
          this.getdata(this.formInline)
        },
        //显示编辑界面
        handleEdit: function(index, row) {
          this.editFormVisible = true
          if (row != undefined && row != 'undefined') {
            this.title = '修改'
            this.editForm.id = row.id
            this.editForm.title = row.title
            this.editForm.sort = row.sort
          } else {
            this.title = '添加'
            this.editForm.id = ''
            this.editForm.title = ''
            this.editForm.sort = ''
          }
        },

        // 编辑、增加页面保存方法
        submitForm(editData) {
          this.$refs[editData].validate(valid => {
            if (valid) {
              this.$axios.post("http://localhost:8080/manage/ExpectedSalary/update",this.editForm)
                .then(res=>{
                  this.editFormVisible = false
                  this.loading = false
                  if (res.data) {
                    this.getdata(this.formInline)
                    this.$message({
                      type: 'success',
                      message: '日期保存成功！'
                    })
                  } else {
                    this.$message({
                      type: 'info',
                      message: res.msg
                    })
                  }
                })
                .catch(err => {
                  this.editFormVisible = false
                  this.loading = false
                  this.$message.error('日期保存失败，请稍后再试！')
                })

            } else {
              return false
            }
          })
        },
        // 删除公司
        deleteUser(index, id) {
          this.$confirm('确定要删除吗?', '信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.$axios.get("http://localhost:8080/manage/ExpectedSalary/delete?id="+id)
                .then(res => {
                  if (res.data) {
                    this.$message({
                      type: 'success',
                      message: '日期已删除!'
                    })
                    this.getdata(this.formInline)
                  } else {
                    this.$message({
                      type: 'info',
                      message: res.data.msg
                    })
                  }
                })
                .catch(err => {
                  this.loading = false
                  this.$message.error('日期删除失败，请稍后再试！')
                })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        },
        // 关闭编辑、增加弹出框
        closeDialog() {
          this.editFormVisible = false
        }
      }
    }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }
  .userRole {
    width: 100%;
  }

</script>


